<template>
    <div class="hello">

        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据统计</el-breadcrumb-item>
            <el-breadcrumb-item>体检统计</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="parent_1">
            <div id="myChart3" :style="{width: '50%', height: '300px'}"></div>
            <div id="myChart2" :style="{width: '50%', height: '300px'}"></div>
        </div>
        <div id="myChart" :style="{width: '100%', height: '500px'}"></div>
    </div>
</template>

<script>
    // 局部引入 echarts
    import * as echarts from 'echarts'
    // 引入echarts
    //let echarts = require('echarts/lib/echarts')
    // 引入中国地图数据
    import '@/assets/plugins/china'
    export default {
        name: 'HelloWorld',
        data() {
            return {
                myChart: null,
                option: {
                    title: {
                        text: '各地区体检套餐销售',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['各地区体检套餐销售', 'iphone4', 'iphone5']
                    },
                    visualMap: {
                        min: 0,
                        max: 2500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'], // 文本，默认为数值文本
                        calculable: true
                    },
                    toolbox: {
                        show: false,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {
                                readOnly: false
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [{
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    var colorList = [
                                        '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                        '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                        '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                },

                            }
                        },
                        name: '各地区体检套餐销售',
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: [{
                            name: '北京',
                            value: this.randomData()
                        },
                            {
                                name: '天津',
                                value: this.randomData()
                            },
                            {
                                name: '上海',
                                value: this.randomData()
                            },
                            {
                                name: '重庆',
                                value: this.randomData()
                            },
                            {
                                name: '河北',
                                value: this.randomData()
                            },
                            {
                                name: '河南',
                                value: this.randomData()
                            },
                            {
                                name: '云南',
                                value: this.randomData()
                            },
                            {
                                name: '辽宁',
                                value: this.randomData()
                            },
                            {
                                name: '黑龙江',
                                value: this.randomData()
                            },
                            {
                                name: '湖南',
                                value: this.randomData()
                            },
                            {
                                name: '安徽',
                                value: this.randomData()
                            },
                            {
                                name: '山东',
                                value: this.randomData()
                            },
                            {
                                name: '新疆',
                                value: this.randomData()
                            },
                            {
                                name: '江苏',
                                value: this.randomData()
                            },
                            {
                                name: '浙江',
                                value: this.randomData()
                            },
                            {
                                name: '江西',
                                value: this.randomData()
                            },
                            {
                                name: '湖北',
                                value: this.randomData()
                            },
                            {
                                name: '广西',
                                value: this.randomData()
                            },
                            {
                                name: '甘肃',
                                value: this.randomData()
                            },
                            {
                                name: '山西',
                                value: this.randomData()
                            },

                            {
                                name: '内蒙古',
                                value: this.randomData()
                            },
                            {
                                name: '陕西',
                                value: this.randomData()
                            },

                            {
                                name: '吉林',
                                value: this.randomData()
                            },
                            {
                                name: '福建',
                                value: this.randomData()
                            },
                            {
                                name: '贵州',
                                value: this.randomData()
                            },
                            {
                                name: '广东',
                                value: this.randomData()
                            },
                            {
                                name: '青海',
                                value: this.randomData()
                            },
                            {
                                name: '西藏',
                                value: this.randomData()
                            },
                            {
                                name: '四川',
                                value: this.randomData()
                            },
                            {
                                name: '宁夏',
                                value: this.randomData()
                            },
                            {
                                name: '海南',
                                value: this.randomData()
                            },
                            {
                                name: '台湾',
                                value: this.randomData()
                            },
                            {
                                name: '香港',
                                value: this.randomData()
                            },
                            {
                                name: '澳门',
                                value: this.randomData()
                            }
                        ]
                    }]
                },
                myChart2: null,
                option2: {
                    title: {
                        text: '套餐销量分布',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['复工复产', '入职体检男', '入职体检女', '健康体检', '公务员体检']
                    },
                    series: [{
                        name: '销量分布',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [{
                            value: 335,
                            name: '复工复产'
                        },
                            {
                                value: 310,
                                name: '入职体检男'
                            },
                            {
                                value: 234,
                                name: '入职体检女'
                            },
                            {
                                value: 135,
                                name: '健康体检'
                            },
                            {
                                value: 1548,
                                name: '公务员体检'
                            }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }],
                },
                myChart3: null,
                option3: {
                    title: {
                        text: '套餐收入分布',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['复工复产', '入职体检男', '入职体检女', '健康体检', '公务员体检']
                    },
                    series: [{
                        name: '销量分布',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [{
                            value: 335,
                            name: '复工复产'
                        },
                            {
                                value: 310,
                                name: '入职体检男'
                            },
                            {
                                value: 234,
                                name: '入职体检女'
                            },
                            {
                                value: 135,
                                name: '健康体检'
                            },
                            {
                                value: 1548,
                                name: '公务员体检'
                            }
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }],
                },
            }

        },
        watch: {
            // 监听 option 更新
            option: {
                // 更新处理，也可以 handler(newVal，oldVal)
                handler(newVal) {
                    if (newVal) {
                        this.myChart.setOption(newVal)
                    }
                },
                //关键,对象内部属性的监听(内部有数据更新，也进行对应的watch触发)
                deep: true
            },
        },

        mounted() {
            this.drawBar();
            this.drawBar2();
            this.drawBar3();
        },
        methods: {
            drawBar() {
                // 基于准备好的dom，初始化echarts实例
                // 全局使用 echarts
                // this.myChart = this.$echarts.init(document.getElementById('myChart'))
                // 调用局部的 echarts
                this.myChart = echarts.init(document.getElementById('myChart'))
                // 绘制图表
                this.myChart.setOption(this.option);

                // 设置该 chart 的 resize 方法
                window.addEventListener("resize", this.myChart.resize)
            },
            drawBar2() {
                // 调用局部的 echarts
                this.myChart2 = echarts.init(document.getElementById('myChart2'))
                // 绘制图表
                this.myChart2.setOption(this.option2);

                // 设置该 chart 的 resize 方法
                window.addEventListener("resize", this.myChart2.resize)
            },
            drawBar3() {
                // 调用局部的 echarts
                this.myChart3 = echarts.init(document.getElementById('myChart3'))
                // 绘制图表
                this.myChart3.setOption(this.option3);

                // 设置该 chart 的 resize 方法
                window.addEventListener("resize", this.myChart3.resize)
            },

            randomData() {
                return Math.round(Math.random() * 1000);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   #myChart2 {
       float: left;
   }
    #myChart3 {
        float: right;
    }
    .parent_1 {
        overflow: hidden;
    }
</style>